// ajax请求参数
let params = {
  pagenum: 1, //
  pagesize: 2, // 每页2条数据
  // state:
  // cate_id:
};

// 封装函数，获取文章，渲染到tbody中
function renderArticle() {
  axios.get("/my/article/list", { params }).then((res) => {
    console.log(res.data);
    let { status, data, total } = res.data;
    if (status === 0) {
      let str = "";
      data.forEach((item) => {
        str += `
            <tr>
            <td>${item.title}</td>
            <td>${item.cate_name}</td>
            <td>${item.pub_date}</td>
            <td>${item.state}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs">
                编辑
              </button>
              <button
                type="button"
                class="layui-btn layui-btn-xs layui-btn-danger"
              >
                删除
              </button>
            </td>
          </tr>
            `;
      });
      $("tbody").html(str);
      // 处理完数据，调用分页函数
      showPage(total);
    }
  });
}
renderArticle();

//-------------------------分页-------------------------
// 1.加载模块
let laypage = layui.laypage;
function showPage(t) {
  // 执行一个laypage实例
  laypage.render({
    elem: "page", // 注意：这里的 testl 是ID ，不用加 # 号
    count: t, // 数据总数，从服务端得到
    limit: params.pagesize, // 每页显示几条
    curr: params.pagenum, // 当前页
    limits: [1, 2, 3, 4], // 下拉页的选项
    prev: "PREV",
    next: "NEXT",
    layout: ["limit", "prev", "page", "next", "count", "skip"],
    // jump 表示切换分页的回调
    jump: function (obj, first) {
      // 首页不执行
      if (!first) {
        // do something
        // obj包括了当前分页的所有参数，比如:
        // console.log(obj.curr); // 得到当前页，以便向服务器请求对应页的数据
        // console.log(obj.limit); // 得到每页显示的条数
        params.pagenum = obj.curr;
        params.pagesize = obj.limit;
        renderArticle();
      }
    },
  });
}

// -----------------------筛选 ------------------------
// 获取真实的分类
axios.get("/my/category/list").then((res) => {
  let { status, data } = res.data;
  if (status === 0) {
    // console.log(data);
    let str = "";
    data.forEach((item) => {
      str += `<option value="${item.id}">${item.name}</option>`;
    });
    $("#category").append(str);
    // 更新渲染
    let form = layui.form;
    form.render("select");
  }
});

// 完成筛选
$("#search").on("submit", function (e) {
  e.preventDefault();
  // 获取下拉菜单的俩个字
  let cate_id = $("#category").val();
  let state = $("#state").val();
  // 设置请求参数
  if (cate_id) {
    params.cate_id = cate_id;
  } else {
    delete params.cate_id; // delete用于删除对象的属性
  }

  if (state) {
    params.state = state;
  } else {
    delete params.state;
  }

  //筛选的时候，重置pagenum=1
  params.pagenum = 1;

  // 发送请求，获取文章
  renderArticle();
});
